
<script setup lang="ts">
  import {  ref,computed,onMounted} from 'vue'
  import createBoxWarp from "./vivews/boxWrap/index"
  import home from "@/assets/home.svg?raw"
  import arrow from "@/assets/arrow.svg?raw"
  import refresh from "@/assets/refresh.svg?raw"
  import setting from "@/assets/setting.svg?raw"
  import routerComponent from "./vivews/router.vue"
  import settingCoComponent from "./vivews/setting.vue"
  import { routerApi } from "./hooks/routers"
  import { mkApi } from "./utils/monkeyTool/monkeyApi"
  import { position,realWidth} from "./hooks/position"
  // 设置获取到的路由名称
  const routerName = ref<string>("---/---")
  // 判断页面是否已经被拦截
  const proxyStatus = computed(()=> {
    return routerApi.getProxyStatus()
  })
  // 初始化浮窗样式、点击事件
  const box = ref()
  onMounted(()=>{
    realWidth.value = box.value.clientWidth
    routerName.value = routerApi.getActiveName()
    // 储存当前激活的调试信息
    if(location.href.includes("localhost")){
      mkApi.ACTIVE_PATHNAME.set(location.host)
    }
  })
  document.addEventListener("click",()=>{
    createBoxWarp(box.value, null)
  })
  // 其他页面关闭调试时，会导致当前页面显示有问题，此时刷新页面
  function refreshByUnHealthStatus(){
    if(proxyStatus.value && !mkApi.SAAS_WEB_DEBUG_AVAILABLE.get()){
      if(confirm("saasweb调试状态异常！请刷新页面！")){
        location.reload()
      }
    }
  }
  // 页面刷新相关事件
  const refreshApi = {
    reLoad:()=>{
      mkApi.REFRESH.set(true)
      location.href = location.href
    },
    deleteStorage:()=>{
      const refreshStatus = mkApi.REFRESH.get()
      if(refreshStatus){
        localStorage.clear();
        sessionStorage.clear()
        let keys = document.cookie.match(/[^ =;]+(?=\=)/g);
        for (var i =  keys.length; i--;)
        document.cookie=keys[i]+'=0;expires=' + new Date(0).toUTCString()
      }
      mkApi.REFRESH.set(false)
    }
  }
  // 页面卸载时
  window.addEventListener("unload", () => {
    // 清理缓存
    refreshApi.deleteStorage()
    // 清除当前储存的调试信息
    if(location.href.includes("localhost")){
      mkApi.ACTIVE_PATHNAME.set("")
    }
  });
  // 主应用切换时
  window.addEventListener('popstate',()=>{
    const saasWeb_available = mkApi.SAAS_WEB_DEBUG_AVAILABLE.get()
    const saasWebInfo = mkApi.SAAS_WEB_DEBUG_INFO.get()
    // 其他页面关闭时
    if(!saasWeb_available && proxyStatus) return location.reload()
    // 调试开启
    if(saasWeb_available && proxyStatus && location.href.includes(saasWebInfo.serverName)){
      location.reload()
    }
    setTimeout(()=>{
      routerName.value = routerApi.getActiveName()
    },1000)
  })
  // 弹框的右侧区域显隐
  const nameWrapVisible = ref(false)
  const mouseenterMoveBtn = ()=>{
    createBoxWarp(box.value, null)
    nameWrapVisible.value = true
  }
  
</script>

<template>
  <!--  -->
  <div 
    class="monkey-wrap" 
    v-drag 
    ref="box" 
    @mousemove="refreshByUnHealthStatus"
    :style="{top:position.boxTop,left:position.boxLeft}" 
    @mouseleave="nameWrapVisible = false"
    :class="{proxy:proxyStatus}"
  >
    <div class="monkey-home-wrap" >
      <span class="icon v-drag-handle" v-icon="[home,proxyStatus ? '#c00' : '']" @mouseenter="mouseenterMoveBtn()"></span>
      <Transition name="name-wrap">
        <div class="monkey-name-wrap" v-if="nameWrapVisible" @mouseenter="createBoxWarp(box, routerComponent)">
          <span class="monkey-name" >{{ routerName }}</span>
          <span class="monkey-arrow" v-icon="[arrow,proxyStatus ? '#c00' : '']"></span>
        </div>
      </Transition>
    </div>
    <Transition name="btn-wrap">
      <div class="monkey-menu-wrap" v-if="nameWrapVisible">
        <span class="icon" v-icon="[refresh,proxyStatus ? '#ffe6e6' : '']" v-color="proxyStatus" @click="refreshApi.reLoad"></span>
        <span class="icon" v-icon="[setting,proxyStatus ? '#ffe6e6' : '']" v-color="proxyStatus" @mouseenter="createBoxWarp(box, settingCoComponent)"></span>
      </div>
  </Transition>
  </div>
</template>

<style scoped lang="less">
.monkey-wrap{
  position: fixed;
  cursor: pointer;
  z-index: 9999;
  user-select: none;
  background:  rgba(255, 255, 255, .5);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 8px 0 rgb(7 17 27 / 10%);
  border-radius: 8px;
  display: flex;
  align-items: center;
  padding: 2px 5px;
  height: 32px;
  right: auto;
  .v-drag-handle{
    cursor: move;
  }
  .icon{
    width: 16px;
    height: 16px;
    display: inline-block;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    margin: 0 5px;
  }
  // width: 235px;
  .monkey-home-wrap{
    overflow: hidden;
    display: flex;
    height: 25px;
    align-items: center;
    border-radius: 15px;
    color: rgb(0, 101, 179);
    background-color: rgb(225, 242, 255);
    .monkey-name-wrap{
      display: flex;
      min-width: 80px;
      align-items: center;
      .monkey-arrow{
        width: 10px;
        height: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        transform:  rotate(180deg);
        margin: 2px 10px 0 5px;
        transition: transform .3s;
      }
      .monkey-name{
        text-align: center;
        display: inline-block;
        margin: 5px;
        font-size: 13px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      &:hover .monkey-arrow  {
        transform:  rotate(0deg);
        transition: transform .3s;
      }

    }
  }
  .monkey-menu-wrap{
    display: flex;
    align-items: center;
  }
}
.proxy{
  .monkey-home-wrap{
    background-color: #ffe6e6;
    color: #c00;
  }
}
.name-wrap-enter-active {
  transition: all 0.2s ease-out;
}
.name-wrap-leave-active {
  transition: all 0.2s ease-in;
}
.name-wrap-enter-from{
  transform: scale(0.9);
  width: 100%;
  opacity: 0;
}
.name-wrap-leave-to {
  transform: scale(0.9);
  width: 50%;
  opacity: 0;
}
.btn-wrap-enter-active {
  transition: all 0.2s ease-out;
}

.btn-wrap-leave-active {
  transition: all 0.2s ease-in;
}

.btn-wrap-enter-from{
  transform: translateX(5px);
  opacity: 0;
}
.btn-wrap-leave-to {
  transform: translateX(5px);
  opacity: 0;
}
</style>
